<!-- 页面  -->
<template>
  <view class="content">
	  <view class="list">
	  	<scroll-view class="cates" scroll-x="true" :scroll-into-view="activeMenu">
			<template v-for="(item,index) in cates" :key="index">
				<view class="cate-item" :id="index" :class="{'select':secondMenu==index,'unselect':secondMenu!=index}" @click="catesClick(index)">{{item.name}}</view>
			</template>
	  	</scroll-view>
	  	<!-- <view class="icons" @click="iconClick"><uni-icons type="down" size="20"  color="#767676"></uni-icons></view> -->
	  </view>
	  
	 <su-popup :show="show" :round="20" type="top" :isMaskClick="isMaskClick" @maskClick="maskClick">
		 <view class="popup-view" :style="{marginTop:popupHeight+'px'}">
			 <view class="top-head">
				 <view class="title">{{title}}</view>
				 <uni-icons type="up" size="20"  color="#767676" @click="maskClick"></uni-icons>
			 </view>
			 <view class="popup-content">
				 <template v-for="(item,index) in cates" :key="index">
					 <view class="popup-item" @click="popupItemClick(index)">{{item.name}}</view>
				 </template>
			 </view>
		 </view>
	 </su-popup>
	  
	  <view class="second-cates">
		 <view class="second-cates-title">{{title}}</view>
		 <view class="second-cates-table">
			 <view class="second-cates-cell" v-for="(item,index) in three" :key="index"> 
				 <image :src="sheep.$url.cdn(item.image||'/storage/default/20250321/bae9d5feae88c2561c1c71293cc0f093.png')" class="second-cates-cell-img"></image>
				 <view class="second-cates-cell-txt">{{item.name}}</view>
			 </view>
		 </view>
	  </view>
	  
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  
  import { computed,reactive,ref,onMounted} from 'vue';
  
  import { onPageScroll } from '@dcloudio/uni-app';
  
  const popupHeight = ref(0);
  //弹窗显示
  const show = ref(false);
  
  const isMaskClick=ref(true);
  
  const anchorList = ref([]);
  
  //二级分类标题
  const title = computed(()=>{
	  return props.data.children[props.activeMenu].children[props.secondMenu]?.name
  })
  //二级分类
  const cates = computed(()=>{
	  return props.data.children[props.activeMenu]?.children
  })
  //计算三级分类
  const three = computed(()=>{
	  
	  return props.data.children[props.activeMenu]?.children[props.secondMenu]?.children;
  })
  
  const emits = defineEmits(['catesClick','popupItemClick','scrollToView'])
  
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
	
    activeMenu: [Number, String],
    pagination: Object,
	secondMenu: [Number, String],
  });
  
 
  //分类点击事件
  function catesClick(index){
	 emits('catesClick',{data:index});
	  uni.pageScrollTo({
		 selector:'#'+index,
	     duration: 0,
	   });
  }
  //下拉图标点击
  function iconClick(){
	  show.value = true;
  }
  //遮罩层关闭事件
  function maskClick(){
	  show.value = false;
  }
  //点击弹窗分类点击事件
  function popupItemClick(index){
	  show.value = false;
	  emits('popupItemClick',{data:index});
	  
  }
  
  onMounted(()=>{
	getAnchorPositions(); 
	
	const systemInfo = uni.getSystemInfoSync();
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	   
	const statusBarHeight = systemInfo.statusBarHeight;
	const navBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
	popupHeight.value = statusBarHeight + navBarHeight+10;

  })
  
  function getAnchorPositions() {
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll('.cate-item') 
        .boundingClientRect(data => {
          anchorList.value = data.map(item => ({
            id: item.id,
            top: item.top
          }));
        })
        .exec();
    }
	
	 onPageScroll((e)=>{
		 updateActiveAnchor(e.scrollTop);
	 }) 
	
	function updateActiveAnchor(scrollTop) {
      let activeAnchor = '';
      for (let i = anchorList.value.length - 1; i >= 0; i--) {
        if (scrollTop >= anchorList.value[i].top - 50) { // 适当调整偏移量
          activeAnchor = anchorList[i].value.id;
          break;
        }
      }
      if(activeAnchor.length>0){
		  emits('scrollToView',{data:activeAnchor});
	  }
    }

</script>

<style lang="scss" scoped>
   .content{
	    width:100%;
		display:flex;
		flex-direction: column;
	   .list{
		  position:relative;
	   	  display:flex;
	   	  flex-direction: row;
	   	  justify-content: space-between;
	   	  align-items: center;
		  width:100%;
		  
	   	 .cates{
			 // width:calc(100% - 65rpx);
			 width:100%;
			 white-space: nowrap;
			 		
			 
			margin-top:10rpx;
			height: 85rpx;
			 
			  
			  .cate-item{
				  
				display: inline-block;
				 
				line-height: 65rpx;
				  		
				  
				width:138rpx;
				
				
				font-family: Source Han Sans;
				font-size: 26rpx;
				font-weight: 500;
			
				border-radius: 100rpx;
				text-align: center;
				margin-right:10rpx;
				
			  }
			 
	   	  }
		  .icons{
			position:absolute;
			right:-8rpx;
			width: 65rpx;
			height: 65rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 100rpx;
			
			background: #F3F3F3;
			
			box-shadow: -10px 0px 20px 0px rgba(144, 144, 144, 0.17);
		  }
	   }
	   .second-cates{
		   display: flex;
		   flex-direction: column;
		   padding:25rpx 22rpx 0 22rpx;
		   background: #F7F7F7;
		   border-radius: 20px;
		   margin:20rpx 0;
		   .second-cates-title{
			   margin-bottom: 20rpx;
	
			   height: 43rpx;
	
			   
			   font-family: Source Han Sans;
			   font-size: 30rpx;
			   font-weight: 500;
			
			   letter-spacing: 0em;
			   

			   color: #444444;
		   }
		   .second-cates-table{
			   display:flex;
			   flex-direction: row;
			   justify-content: flex-start;
			
			   flex-wrap: wrap;
			   .second-cates-cell{
				   display:flex;
				   flex-direction: column;
				   justify-content: center;
				   align-items: center;
				   margin-bottom: 23rpx;
				   .second-cates-cell-img{
					   width: 125rpx;
					   height: 125rpx;
					  
				   }
				   .second-cates-cell-txt{
					    margin-top:10rpx;
						
						height: 35rpx;

						
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						color: #323232;
						display:flex;
						justify-content: center;
						
						
				   }
			   }
			   .second-cates-cell:nth-child(3n-1){
				   margin-left: 20rpx;
				   margin-right: 20rpx;;
			   }
		   }
	   }
   }
	   
  .popup-view{
	  height:400rpx;
	  width:calc(100% - 20rpx);
	  background-color: red;
	  border-radius: 20rpx;
	 
	  background: #F0F0F0;
	  color:#fff;
	  display:flex;
	  display:flex;
	  flex-direction: column;
	  padding:20rpx 10rpx;
	  .top-head{
		 display:flex;
		 flex-direction: row;
		 justify-content: space-between;
		 align-items: center;
	  }
	  .popup-content{
		  display:flex;
		  flex-direction: row;
		  justify-content: flex-start;
		  align-items: center;
		  flex-wrap: wrap;
		  margin-top:20rpx;
		  .popup-item{
			  width:128rpx;
			  height:50rpx;
			  
			  display:flex;
			  flex-direction: row;
			  justify-content: center;
			  align-items: center;
			  
			  color:red;
		  }
	  }
	 
  }	 
  .select{
  	 background: rgba(220, 70, 60, 0.27);
  	  color: #DC463C;
  	  border: 1px solid #DC463C;
   }
  
  .unselect{
  	 background: #F3F3F3;
  	 color: #3B3B3B;
  	 border:none;
  	 
  }	
 
 
</style>
